<template>
	<el-dialog
		v-model="productDialogConfig.visible"
		:title="productDialogConfig.title"
		class="dialog-product-config"
		width="1000"
	>
		<el-form
			:inline="true"
			ref="ruleFormRef"
			style=""
			:model="formProduct"
			:rules="rules"
			label-width="auto"
			class="form-product"
			status-icon
			require-asterisk-position="left"
			size="small"
			:label-position="'left'"
		>
			<el-row>
				<el-col span="12">
					<el-form-item label="产品名称" prop="name">
						<el-input v-model="formProduct.name" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col span="12">
					<el-form-item label="产品编码" prop="code">
						<el-input v-model="formProduct.code" />
					</el-form-item>
				</el-col>
			</el-row>
			<!-- <el-card>
				<template #header>
					<div class="card-header">
						<span>组件</span>
					</div>
				</template>
				<el-row
					v-for="componentItem in formProduct.components"
					align="middle"
					style="flex-wrap: nowrap"
				>
					<el-col span="8">
						<el-form-item label="组件名称" prop="componentName">
							<el-input v-model="componentItem.name" />
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item label="组件编码" prop="componentCode">
							<el-input v-model="componentItem.code" />
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item label="上一级组件" prop="componentPrev" style="margin-right: 3px">
							<el-input v-model="componentItem.name" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" :icon="Minus" @click="removeComponent(componentItem)" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-button type="primary" :icon="Plus" @click="addComponent" />
				</el-row>
			</el-card> -->
			<el-row style="margin-top: 10px">
				<el-col>
					<el-form-item label="技术要求" prop="name" style="width: 100%">
						<el-input
							type="textarea"
							rows="5"
							class="txt-tech-requirement"
							v-model="formProduct.name"
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row style="margin-top: 10px">
				<el-col span="20">
					<el-form-item label="附件" prop="name">
						<upload :fileList="formProduct.files" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-card>
			<template #header>
				<p>产品配置表</p>
			</template>
			<div>
				<el-input
					size="small"
					style="width: 200px; margin-right: 10px"
					placeholder="产品筛选"
					:suffix-icon="Search"
				/>
				<el-button
					type="primary"
					size="small"
					:icon="Plus"
					@click="handleOpenEditProduct"
				></el-button>
				<!-- <el-button type="success" size="small" :icon="Edit" @click="handleOpenEditProduct">
					修改
				</el-button>
				<el-button type="danger" size="small" :icon="Delete" :disabled="!selectedProducts.length">
					删除
				</el-button> -->
			</div>
			<productConfigTable
				:productConfigDataList="productConfigDataList"
				@handleProductsSelectionChange="handleProductsSelectionChange"
			/>
		</el-card>
	</el-dialog>
</template>
<style lang="scss" scoped>
.dialog-product-config {
	width: 800px;
}
.txt-tech-requirement {
	width: 50%;
}
</style>
<script lang="ts" setup>
import { Plus, Minus, Edit, Delete, Search } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import productConfigTable from './productConfigTable.vue';
import type { ProductConfig } from '../mockdata';
import { productConfigDataList } from '../mockdata';
import upload from './upload.vue';

const props = defineProps({
	productDialogConfig: {
		type: Object,
		default: {
			visible: false,
			title: '',
		},
	},
});

const formProduct = reactive<ProductConfig>({
	name: '',
	code: '',
	components: [{ name: '', code: '', prev: '' }],
	files: [],
});

const rules = reactive({
	name: {
		required: true,
		message: '必填',
	},
	code: {
		required: true,
		message: '必填',
	},
	componentName: {
		required: true,
		message: '组件名称必填',
	},
	componentCode: {
		required: true,
		message: '组件编码必填',
	},
});

/**
 * 添加一行组件
 */
const addComponent = () => {
	formProduct.components.push({
		name: '',
		code: '',
		prev: '',
	});
};

const removeComponent = item => {
	const index = formProduct.components.findIndex(v => v === item);
	formProduct.components.splice(index, 1);
};

/**
 * 选中的产品数量
 */
const selectedProducts = ref([]);

const handleProductsSelectionChange = _selections => {
	selectedProducts.value = _selections;
};

//打开修改产品对话框
const handleOpenEditProduct = () => {
	if (selectedProducts.value.length != 1) {
		return ElMessage({
			message: '请选中一个产品进行修改',
			type: 'error',
		});
	}

	props.productDialogConfig.visible = true;
	props.productDialogConfig.title = '修改产品';
};
</script>
